<!--
  Generated template for the ExercisesPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
  <ion-navbar color="mainColor">
    <ion-title *ngIf="!showSearchBar">全部习题</ion-title>
    <ion-searchbar
      placeholder="请输入关键词"
      [(ngModel)]="searchText"
      [showCancelButton]="false"
      *ngIf="showSearchBar"
    >
    </ion-searchbar>
    <ion-buttons *ngIf="!showSearchBar" end>
      <button ion-button icon-only (click)="showSearchBar = !showSearchBar">
        <ion-icon name="search"></ion-icon>
      </button>
    </ion-buttons>
    <ion-buttons *ngIf="showSearchBar" end>
      <button ion-button (click)="search()">
        搜索
      </button>
      <button ion-button icon-only (click)="showSearchBar = !showSearchBar">
        <ion-icon name="close"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
  <div class="exer-filter">
    <div [ngClass]="{'active': activeNum === 1}" (click)="activeNum = activeNum === 1?0:1">
      {{searchOptions.exerciseTypeStr}}
    </div>
    <div [ngClass]="{'active': activeNum === 2}" (click)="activeNum = activeNum === 2?0:2">
      {{searchOptions.exerciseStateStr}}
    </div>
    <div [ngClass]="{'active': activeNum === 3}" (click)="activeNum = activeNum === 3?0:3">
      {{searchOptions.exerciseSortStr}}
    </div>
    <ul  [ngClass]="{'active': activeNum === 1}">
      <li (click)="selectClick('type','','全部')">
        全部
      </li>
      <li (click)="selectClick('type','10001','单选题')">
        单选题
      </li>
      <li (click)="selectClick('type','10002','多选题')">
        多选题
      </li>
      <li (click)="selectClick('type','10004','主观题')">
        主观题
      </li>
      <li (click)="selectClick('type','10006','头脑风暴题')">
       头脑风暴题
      </li>
      <li (click)="selectClick('type','10008','判断题')">
        判断题
      </li>
      <li (click)="selectClick('type','10009','投票题')">
        投票题
      </li>
    </ul>
    <ul  [ngClass]="{'active': activeNum === 2}">
      <li (click)="selectClick('status','','全部')">
        全部
      </li>
      <li (click)="selectClick('status','1','进行中')">
        进行中
      </li>
      <li (click)="selectClick('status','2','已结束')">
        已结束
      </li>
    </ul>
    <ul  [ngClass]="{'active': activeNum === 3}">
      <li (click)="selectClick('sort','asc','正序')">
        正序
      </li>
      <li (click)="selectClick('sort','desc','倒序')">
        倒序
      </li>
    </ul>
  </div>
</ion-header>


<ion-content>
  <ion-refresher (ionRefresh)="doRefresh($event)">
    <ion-refresher-content pullingIcon="arrow-dropdown" pullingText="下拉刷新" refreshingSpinner="circles"  refreshingText="努力刷新数据中...">
    </ion-refresher-content>
  </ion-refresher>
  <ul class="exer-list">
    <li [class]="'bg-'+(i%3+1)"  *ngFor="let item of exerciseList;let i=index" (click)="ViewSource(item.source_name,item.fid,item.exercise_type,i,item.start_answer,item.publish_time,item.teacher_id,
    item.unit_id,item.course_class_id,item.class_type,item.answer_type)">
      <div class="course-info">
        <div class="exer-img">
          <img [src]="'./assets/imgs/logo.png'" alt="">
        </div>
        <div class="exer-type">
          <div [ngSwitch]="item.exercise_type">
            <p *ngSwitchCase="10001">单选题</p>
            <p *ngSwitchCase="10002">多选题</p>
            <p *ngSwitchCase="10004">主观题</p>
            <p *ngSwitchCase="10006">头脑风暴题</p>
            <p *ngSwitchCase="10009">投票题</p>
            <p *ngSwitchCase="10008">判断题</p>
          </div>
          <p>发布时间：{{item.create_time}}</p>
          <p *ngIf="item.deadline!=null&&item.deadline!=''">截止时间：{{item.deadline}}</p>
        </div>
        <p class="exer-status" [ngClass]="{'ing':item.start_answer=='1'}">{{item.start_answer=="1"?"进行中":"已结束"}}</p>
        <!--1:进行中 2.已结束    //单选：10001，多选：10002，主观：10004，头脑风暴：10006，投票：10009，判断：10008-->
      </div>
      <div class="course-code">
        <p>
          {{item.exercise_name}}
        </p>
        <ul>
        <li  *ngFor="let option of exerciseList[i].excoptionList" [class.right]="option.is_right==='是'&&item.start_answer===2">{{option.option_sort}}.{{option.option_content}}</li>
        </ul>
      </div>
      <p class="source">源自：{{item.class_unit}}</p>
      <p class="my-answer">我的答案：{{item.answer_option==""?"未作答":item.answer_option}}</p>
    </li>
  </ul>
  <span *ngIf="noMoreFlag==1">没有更多了</span>
  <ion-infinite-scroll (ionInfinite)="doInfinite($event)" threshold="100px">
    <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="加载更多">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>
